<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #moveImg{
            position: absolute;
            display: none;
        }
        .div1{
            width: 300px;
            height: 200px;
            background-color: yellow;
            border: 2px solid black;
        }
        .div2{
            width: 200px;
            height: 300px;
            background-color: blue;
            border: 4px solid red;
        }
    </style>

    <script>
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function (){
            //鼠标进入，显示图片
            document.onmouseover = function (){
                $("moveImg").style.display = "block";
            }
            //鼠标离开，隐藏图片
            document.onmouseout = function (){
                $("moveImg").style.display = "none";
            }
            //鼠标移动，图片随之移动
            //e表示事件对象，通过事件对象可以得到事件发生时的一切信息
            document.onmousemove = function (e){
                $("moveImg").style.left = e.clientX + 20 + "px";
                $("moveImg").style.top = e.clientY + 20 +"px";
            }
        }

        function checkNumber(){
            let a = parseInt($("number").value);
            $("number").value = isNaN(a)?"":a;
        }
    </script>
</head>
<body>
    <img src="photo/d3.jpg" id="moveImg">

    请输入一个数：<input type="text" id="number" onkeyup="checkNumber()"><br>

    <div id="testDiv" class="div1"></div>
    <input type="button" value="改变样式" onclick="$('testDiv').className = $('testDiv').className == 'div1'?'div2':'div1'">
</body>
</html>